<template>
	<el-container style="height: 100vh;">
		<el-aside :style="{width:isCollapse?'64px':'200px'}">
			<div class="logo">
				<img src="../../assets/images/logo2.png" width="48" v-if="isCollapse" />
				<img src="../../assets/images/logo1.png" width="100%" v-else alt="">

			</div>
			<div class="toggle" @click="isCollapse=!isCollapse" :style="{width:isCollapse?'64px':'120px'}">
				<i class="el-icon-s-unfold" v-if="isCollapse"></i>
				<span v-else>
					<i class="el-icon-s-fold"></i>
					收起
				</span>

			</div>
			<el-menu :collapse="isCollapse" :router="true">
				<el-menu-item index="/admin/dash">
					<i class="el-icon-setting"></i>
					<span slot="title">概览</span>
				</el-menu-item>
				<el-submenu index="/admin/order">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span slot="title">订单</span>
					</template>
					<el-menu-item index="/admin/orderlist">
						<i class="el-icon-menu"></i>
						<span slot="title">订单列表</span>
					</el-menu-item>
					<el-menu-item index="3" disabled>
						<i class="el-icon-document"></i>
						<span slot="title">导航三</span>
					</el-menu-item>
				</el-submenu>

			</el-menu>

		</el-aside>
		<el-container>
			<el-header>Header</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: true
			};
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.logo {
		height: 125px;
		line-height: 125px;
		text-align: center;

		img {
			vertical-align: middle;
		}
	}

	.toggle {
		line-height: 64px;
		height: 64px;
		box-sizing: border-box;
	}

	.toggle .el-icon-s-unfold,
	.toggle .el-icon-s-fold {
		width: 64px;
		height: 64px;
		color: #777;
		text-align: center;


	}

	.toggle .el-icon-s-fold {
		width: 40px;
		text-align: right;
	}
</style>
